<style scoped>
.chart {
  height: 450px;
}
</style>


<template>
  <div>
    <z-space vertical>
      <z-map-chart class="chart" map-name="china" :def="o"></z-map-chart>
      <h3>数据</h3>
      <RemoteFileViewer file="example/views/chart/mapData.js"></RemoteFileViewer>
      <vue-code-mirror :tpl="d.tpl" :js="d.js"></vue-code-mirror>
    </z-space>
  </div>
</template>

<script>
import VueCodeMirror from "@example/components/VueCodeMirror";
import DocProps from "@example/plugins/example/components/DocProps";
import '@/zpkgs/components/z-geos/china';
import ZMapChart from "@/zpkgs/components/z-chart/ZMapChart";
import {dataList} from "@example/views/chart/mapData";
import RemoteFileViewer from "@example/plugins/example/components/RemoteFileViewer";

let o = {
  columns: ['省份', '人口数量'],
  rows: dataList.map(v => {
    return [v.name, v.value]
  })
}
o.records = o.rows


export default {
  components: {
    RemoteFileViewer,
    ZMapChart,
    DocProps,
    VueCodeMirror,
  },
  provide: {
  },
  data() {
    return {
      doc: {
        props: [
          {
            name: 'def',
            type: 'Object',
            defVal: '{columns: [], records: []}',
            desc: '定义'
          }
        ]
      },
      d: {
        tpl: `
<z-map-chart class="chart" map-name="china" :def="o"></z-map-chart>
        `,

      },
      o,
    }
  },
  setup() {
    return {
    }
  }
}
</script>
